<template>
  <div class="related" @click="goto">
       <el-row class="post">
            <div class="post-imgText">
                <div class="post-img">
                    <img 
                    v-if="comments.images"
                    :src="comments.images[0]" alt=""
                    style="width: 100px">
                </div>
                <div class="post-text">
                    <div v-html="comments.title">
                        <!-- [西安验客]繁华未央，迷失在千年古都的夜色 -->
                    </div>
                    <p>{{date}} 阅读 27</p>
                </div>
            </div>
        </el-row>
  </div>
</template>

<script>
import moment from "moment"

export default {
  data() {
    return {
      date: '',
      
    }
  },
  
  props: [
     "comments",
     "conten"
  ],

  methods:{
    goto() {
      console.log(1);
      this.$router.replace("/post/postdetail?id="+this.comments.id)
    }
  },
  
  watch: {
    comments:{
      handler(newName,oldName) {
        // console.log(newName.updated_at);
        // console.log(newName);
        const date = moment(newName.updated_at).format('YYYY-MM-DD hh:mm')
        // console.log(date);
        this.date = date
      },
      immediate:true
    }
  },

}
</script>

<style lang="less" scoped>

  .related {
    cursor: pointer;
      .post {
        position: relative;
        padding-bottom: 50px;
        border-bottom: 1px solid #ccc;
        .post-imgText {
          .post-img {
            margin: 10px 0 0 10px;
          }
          p {
            position: absolute;
            bottom: 10px;
            font-size: 12px;
            color: #999;
          }
        }
      }
}
</style>